<template>
  <div class="menu-container">
    <!--头像-->
    <li>
      <lay-avatar
          :src="avatarSrc"
          radius
          size="lg"
          @click="goToProfile"
          style="cursor: pointer;"
      />
    </li>
    <!--已购买-->
    <li><img src="./img/huowu.svg" title="已购买" /></li>
    <!--购物车-->
    <li><img src="./img/gwc.svg" title="购物车" /></li>
    <!--收藏-->
    <li><img src="./img/soc.svg" title="收藏" /></li>
    <!--足迹-->
    <li><img src="./img/jiao.svg" title="足迹" /></li>
    <!--个人发布-->
    <li>
      <lay-button type="normal" radius class="custom-button" size="lg">
        <img src="./img/jiahao.svg" style="margin-right: 10px" />
        个人发布
      </lay-button>
    </li>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import "./After.css";

// 从 localStorage 中获取头像地址，字段为 'profilepicture'，如果没有则使用默认头像
const avatarSrc = localStorage.getItem('profilepicture') || "https://telegraph-image-766.pages.dev/file/6bc579156c90835f3a738.jpg";

// 获取路由对象
const router = useRouter();

// 点击头像跳转到个人中心页面
const goToProfile = () => {
  router.push({ name: 'UserProfile' }); // 确保路由名称为 'UserProfile'
};
</script>
